@import 'styles/variables'
@import 'styles/mixins'

.hero
  display: flex
  flex-direction: column
  justify-content: space-between
  flex-shrink: 0
  gap: 50px

  min-height: calc(100vh - 100px)
  border-bottom: 8px solid #ffa800

  background-image: url("/assets/train_background.png")
  background-size: cover
  background-color: #ffa800

.hero_content
  display: flex
  align-items: center
  gap: 100px

  max-width: 1440px
  padding-inline: 50px
  margin: 0 auto

  @include to(desktop)
    flex-wrap: wrap
    justify-content: center
    gap: 50px

.hero_content_text
  font-weight: 100
  font-size: 4.5rem
  line-height: 1.1em

  color: #ffffff

.header__size_s
  margin-bottom: 15px

  font-weight: 300
  font-size: 30px
  line-height: 35px

  color: #FFFFFF

.text_accent
  font-weight: 700

.text_light.text_light
  color: #fff

.about
  @include section-width
  padding-block: 7.5% 6%

  &__header
    margin-bottom: 30px

  &__content
    position: relative
    padding-left: 28px

    font-weight: 400
    font-size: 24px
    line-height: 28px

    color: #292929

    &:before
      content: ''
      position: absolute
      left: 0
      top: 0
      bottom: 0
      width: 9px

      background-color: #ffa800

    & > p:not(:last-child)
      margin-bottom: 24px

.features
  @include section-width
  padding-block: 3.5% 5%

  color: #fff

  &__wrapper
    background-image: url('/assets/railway_background.png')
    background-size: cover
    background-color: #ffa800

  &__header
    display: flex
    justify-content: space-between
    align-items: center

    margin-bottom: 100px

  .link__button
    width: 100%
    max-width: 325px

  &__list
    display: flex
    justify-content: space-between

    max-width: 900px
    margin: 0 auto

    @include to(tablet)
      flex-direction: column
      align-items: center
      gap: 30px

  &__item
    display: flex
    flex-direction: column
    align-items: center

    @include from(laptop)
      width: 25%

.feature__icon
  & circle
    fill: #e5e5e5
    fill-opacity: 0.2

  & path
    fill: #fff

  &_wrapper
    @include from(laptop)
      width: 162px
      height: 162px
      margin-bottom: 35px

    @include to(tablet)
      width: 240px
      height: 240px
      margin-bottom: 15px

.feature__description
  font-size: 24px
  line-height: 28px
  text-align: center

.reviews
  max-width: $max-width-section
  margin: 0 auto
  padding-inline: 50px

.reviews__list
  margin-top: 70px
  margin-bottom: 135px

  display: flex
  gap: 85px

  @include to(desktop)
    flex-wrap: wrap
    justify-content: center
    gap: 40px

.reviews__item
  display: flex
  align-items: center
  width: 50%
  text-align: left

  @include to(desktop)
    width: 100%

.reviews
  padding-block: 8% 6.25%

.review
  &__image
    width: 205px
    height: 205px
    border-radius: 50%

    &_wrapper
      flex-shrink: 0
      margin-right: 35px

  &__header
    color: $black

  &__text
    position: relative
    margin-top: 30px

    font-size: 18px
    font-weight: 300
    font-style: italic
    color: #918F94 //todo
    line-height: 21px

    &::before, &::after
      position: absolute
      font-weight: 500
      font-size: 36px

      color: $grey-2

    &::before
      content: '\201C' // “
      top: 0
      left: -20px

    &::after
      content: '\201D' // ”
      bottom: -20px

.carousel .control-dots .dot.dot
  width: 19px
  height: 19px
  margin-inline: 5px

  background: #E5E5E5
  opacity: 1
  box-shadow: none

  &.selected
    background: #C4C4C4
